<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
        span{
            font-size: 30px;
        }
        body{
            background-color: black;color: #fff;
        }
    </style>
</head>

<body>
    <div>
        <img src="images/0.png" alt="" />
        <img src="images/0.png" alt="" />
        <span>:</span>
        <img src="images/0.png" alt="" />
        <img src="images/0.png" alt="" />
        <span>:</span>
        <img src="images/0.png" alt="" />
        <img src="images/0.png" alt="" />
    </div>
    <script>
        function getDouble(n) {
            if (n < 10) {
                return "0" + n;
            } else {
                return "" + n;
            }
        }
       
        function showTime() {
        var oDate = new Date();
        var hour = oDate.getHours();
        var minute = oDate.getMinutes();
        var second = oDate.getSeconds();
        var imgs=document.getElementsByTagName("img");
        var str=getDouble(hour)+getDouble(minute)+getDouble(second);
            for(let i=0;i<imgs.length;i++){
                imgs[i].src="images/"+str[i]+".png";
            }
        }
        showTime();
        setInterval(showTime,1000);
    </script>
</body>

</html>